<template>
    <div>
        <van-nav-bar
                title="景区列表"
                left-text="返回"
                left-arrow
                @click-left="tzback()"
        />

        <!--  1.头部 可以排序-->
        <div>
            <van-dropdown-menu>
                <van-dropdown-item title="排序" v-model="gwhere.order" :options="orderops" />
                <van-dropdown-item title="条件" ref="item">
                    <van-cell center title="包邮">
                        <template #right-icon>
                            <van-switch v-model="gwhere.baoyou" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <van-cell center title="促销">
                        <template #right-icon>
                            <van-switch v-model="gwhere.cuxiao" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <van-cell center title="降价">
                        <template #right-icon>
                            <van-switch v-model="gwhere.jiangjia" size="24" active-color="#ee0a24" />
                        </template>
                    </van-cell>
                    <div style="padding: 5px 16px;">
                        <van-button type="danger" block round @click="onConfirm">
                            确认
                        </van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>

        </div>
        <!--  2.List 上拉分页-->
        <div>
            <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"

            >
                <van-card v-for="t in tickets"
                          :num="t.repertory"
                          :tag="t.tags"
                          :price="t.price"
                          :desc="t.detail"
                          :title="t.title"
                          :thumb="t.imgurl"
                          :origin-price="t.oldprice"
                          @click="tzdetail(t.id,1)"
                />
            </van-list>
        </div>

    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "TicketList",
        setup() {
            const item = ref(null);
            const onConfirm = () => {
                item.value.toggle();
            };
            return {
                item,onConfirm
            }
        },data(){
            return{
                loading:false,
                finished:false,
                tickets:[ ],
                gwhere:{
                    baoyou:false,
                    cuxiao:false,
                    jiangjia:false,
                    order:"0"
                },
                orderops:[
                    { text: '综合排序', value: 0 },
                    { text: '热度排序', value: 1 },
                    { text: '时间排序', value: 2 },
                ]
            }
        }, mounted() {

        this.axios.get("/api/tickets/list.do").then(res=>{
            if(res.data.code==200){
                this.tickets=res.data.data;
            }
        })
    },
        methods: {
            tzback(){
                history.back();
            },
            tzdetail(id,t){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push({path:"/ticketdetail",query:{gid:id,type:t}});
            }
        }
    }
</script>

<style scoped>

</style>
